/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.container {
  margin: auto;
}

.logo-text {
  font-family:
    Google Sans,
    Helvetica Neue,
    sans-serif;
  font-style: normal;
  font-size: 22px;
  line-height: 128.7%;
  letter-spacing: normal;
  color: #2d2c2cbf;
}

.gradient-text {
  font-family:
    Google Sans,
    Helvetica Neue,
    sans-serif;
  font-style: normal;
  font-size: 30px;
  line-height: 128.7%;
  letter-spacing: normal;
  background: linear-gradient(
    89.9deg,
    rgba(66, 133, 244, 0.95) 21.17%,
    #a488f5 44.34%,
    rgba(234, 67, 53, 0.88) 81.26%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.links-pointer {
  cursor: pointer;
}

.logo-icon {
  height: 35px;
  width: 125px;
  cursor: pointer;
}

// .profile-container {
//     margin-left: 1%;
//     font-family: 'Google Sans', sans-serif !important;

//     .circle {
//         display: flex;
//         justify-content: center;
//         width: 40px;
//         height: 40px;
//         border: 5px solid rgb(255, 255, 255);
//         border-radius: 60%;
//         overflow: hidden;
//     }

//     .circle img {
//         width: 100%;
//         height: 100%;
//         object-fit: cover;
//     }
// }

.card-inside-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #3e4245;
  font-size: 1rem;
  font-weight: 400;
  font-family: 'Google Sans', sans-serif !important;
  border-radius: 5px;
  letter-spacing: 0.4px;

  .container-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
    padding-top: 4%;
    padding-bottom: 4%;
  }

  .name {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #3e4245;
    font-weight: 500;
    padding: 1.3em 0.4em;
    flex-direction: column;
    gap: 10px;
    background: #dde3ea !important;
    width: -webkit-fill-available;
    .sub-title {
      color: #3e4245;
    }

    margin: auto;
  }

  .company {
    display: flex;
    align-items: center;
    padding: 0.3em 1em;
    width: -webkit-fill-available;

    .logo {
      padding-right: 2%;
      color: #5f6368;
    }

    .text {
      min-width: 100px;

      .sub-title {
        font-size: 0.85rem;
        margin-bottom: 10px;
        color: #3e4245;
      }
    }

    margin-bottom: 10px;
  }

  .logout {
    background: #dde3ea;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Google Sans', sans-serif !important;
    margin-bottom: 1em;
    cursor: pointer;
    width: -webkit-fill-available;
    padding: 0.3em 1em;

    .logout-container {
      display: flex;
      align-items: center;

      .logo {
        padding-right: 4%;
        color: #5f6368;
      }

      .text {
        .sub-title {
          color: #3e4245;
          font-size: 0.85rem;
          font-family: 'Google Sans', sans-serif !important;
        }
      }
    }
  }
}

//------------css of card end-------------------//

.image {
  width: 35px;
  height: 35px;
}

.fixed-top {
  z-index: 1000;
  position: relative;
}

.top-nav {
  height: 60px;
  background-color: transparent;

  .parent-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 3rem;

    .left-heading {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .logo-icon {
      height: 4.2em;
      width: 4em;
      cursor: pointer;
      background-image: url('../../../assets/images/new-pdc-logo.svg');
      background-size: 443px;
      background-repeat: round;
      border-radius: 28px;
      margin-right: 1em;
    }

    .user-icon {
      height: 50px;
      width: 50px;
      cursor: pointer;
      border-radius: 28px;
    }

    .right-menu-items {
      display: flex;
      align-items: center;

      .profile-container {
        margin-left: 1%;
        font-family: 'Google Sans', sans-serif !important;

        .circle {
          display: flex;
          justify-content: center;
          width: 35px;
          height: 35px;
          border-radius: 60%;
          overflow: hidden;
        }

        .circle img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

.icon-color {
  color: #5f6368;
  font-size: 24px;
}

::ng-deep .quick-link.mat-mdc-menu-panel.mat-mdc-menu-panel {
  width: 420px !important;
  display: flex;
  flex-direction: column;
  background: #f0f4f9;

  .mat-mdc-menu-content {
    padding: 0.5rem;
  }

  .ql-container {
    width: 100%;
    display: flex;
    flex-direction: column;

    .ql-child-container {
      display: flex;
      flex-direction: row;
      text-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-end;
    }

    a,
    a:active {
      text-decoration: none;
    }

    .align-link-content {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 10px;
      width: 100% !important;
      box-shadow: 0px 4px 4px -6px #b9b8b8 !important;
    }

    .no-box-shadow {
      box-shadow: none !important;
    }

    .icon-container {
      display: flex;
      alignment-baseline: after-edge;

      mat-icon {
        color: #161a1d !important;
      }
    }
  }

  .ql-header {
    margin: 1rem;
    margin-left: 1.7rem;
  }

  .avatar {
    width: 40px;
    height: 40px; //<--use the size you choose
    border-radius: 100%;
    text-align: center;
  }

  div.link-label {
    color: #161a1d;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.4px;
    height: 50px;
    margin: 0px 5px;
    width: 57%;
  }

  .avatar span {
    line-height: 40px;
    font-size: 16px;
  }

  .link-button {
    margin: 1rem;
    height: 41px;
    width: 100% !important;
  }
}

.notification-banner-container {
  z-index: 999;
  position: relative;
  width: inherit;
  display: flex;
  flex-direction: row;
  height: 8%;
  background: #f6f9fe;
  align-content: center;
  flex-wrap: wrap;
  padding-left: 1%;
  gap: 1%;
  margin-bottom: 0.2%;

  .amber {
    color: #fbc645;
  }

  .red {
    color: red;
  }

  .blue {
    color: #4285f4;
  }
}

.red-border {
  border-left: 5px solid red;
}

.amber-border {
  border-left: 5px solid #fbc645;
}

.blue-border {
  border-left: 5px solid #4285f4;
}

.notification-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  width: 70%;
}

.notification-buttons-container {
  width: 26%;
  justify-content: flex-end;
  display: flex;
  flex-direction: row;
  gap: 15px;

  button {
    font-family: 'Google Sans', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    line-height: 23px;
    font-size: 14px;
  }

  .dismiss-button {
    letter-spacing: 0.4px;
    color: #4285f4;
  }

  .learn-more-button {
    color: #fff !important;
    background: #4285f4 !important;
    border-radius: 30px;
    letter-spacing: unset;
    box-shadow: none;
  }
}

::ng-deep .profile-menu.mat-mdc-menu-panel.mat-mdc-menu-panel {
  max-width: 320px !important;
  width: 300px !important;
}

::ng-deep .profile-menu .mat-mdc-menu-content {
  padding: 0% !important;
}

.action-item-container {
  width: -webkit-fill-available;
  padding-inline: 5%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.logout-button {
  background: white !important;
  border: 1px solid #4285f4 !important;
}

.logout-button-text {
  color: #4285f4 !important;
}

.app-version-chip {
  font-size: 9px;
  border-radius: -2px;
  padding-inline: 8px;
  line-height: 16px;
  border-radius: 11px;
  margin-left: 8px;
  color: #474c55;
  background:
    linear-gradient(
      92.1deg,
      #bdd1f3 19.16%,
      rgba(199, 183, 245, 0.9) 79%,
      rgba(235, 165, 158, 0.9) 135.24%
    ),
    linear-gradient(
      272.04deg,
      rgba(158, 188, 237, 0.7) 14.93%,
      rgba(158, 188, 237, 0) 104.51%
    ) !important;
}

.bypassLoginLogo {
  background: aliceblue;
  color: cornflowerblue;
  align-items: center;
  cursor: pointer;
}

.bypassMenuContainer {
  display: flex;
  justify-content: center;
  background: aliceblue;
  width: 42% !important;
  height: 40% !important;
  border-radius: 65px !important;
}

.bypassMenuLogo {
  font-size: 6rem;
  height: 6rem;
  width: 6rem;
}

.chat-footer {
  min-height: 60px;
  display: flex;
  border: 1px solid #dde6f6;
  box-shadow: 0px 4px 18px rgba(195, 209, 226, 0.25);
  border-radius: 30px;
  width: 66%;
  margin-top: 25px;
  // box-shadow: 5px 4px 24px rgba(66, 133, 244, 0.15);

  .chat-textarea {
    flex-grow: 1;
    display: flex;
    align-items: center;

    input {
      width: 100%;
      height: 45px;
      border: 0px;
      border-radius: 4px;
      resize: none;
      outline: none;
      padding: 14px;
      font-family: 'Google Sans', sans-serif !important;
      box-sizing: border-box;
      -ms-overflow-style: none;
      scrollbar-width: none;
      font-size: 0.95rem;
      line-height: 1.1rem;
      color: #534646;
      margin-left: 20px;
    }

    input::-webkit-scrollbar {
      display: none;
    }
  }

  .micIcon {
    display: flex;
    align-items: center;
    color: #1f1f1f;
    margin-top: 2px;
    padding-right: 1%;

    img {
      max-width: 40%;
      cursor: pointer;
    }
  }
}

.blue-dot {
  /* Ellipse 1226 */
  content: '';
  width: 8px;
  height: 8px;
  left: 1503px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Blue */
  background: #4285f4;
  animation: blue-transform 2s infinite;
}

.green-dot {
  content: '';
  width: 8px;
  height: 8px;
  left: 1522px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Green */
  background: #0f9d58;
  animation: green-transform 2s infinite;
}

.yellow-dot {
  content: '';
  width: 8px;
  height: 8px;
  left: 1541px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Yellow */
  background: #f4b400;
  animation: yellow-transform 2s infinite;
}

.recording-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  cursor: pointer;
  align-items: baseline;
}

@keyframes blue-transform {
  0% {
    transform: translateY(-14px);
  }

  33% {
    transform: translateY(0);
  }

  66% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-14px);
  }
}

@keyframes green-transform {
  0% {
    transform: translateY(0);
  }

  33% {
    transform: translateY(-14px);
  }

  66% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes yellow-transform {
  0% {
    transform: translateY(0);
  }

  33% {
    transform: translateY(0);
  }

  66% {
    transform: translateY(-14px);
  }

  100% {
    transform: translateY(0);
  }
}
